<!--
 * @Author: your name
 * @Date: 2021-03-27 17:32:24
 * @LastEditTime: 2021-03-28 11:57:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /medicine-web/src/layout/components/CustomSelect/index.vue
-->
<template>
  <div class="custom-select-container">
    <a-dropdown style="width: 100%; height: 100%;">
      <a-menu slot="overlay" @click="handleMenuClick">
        <a-menu-item v-for="item in selection" :key="item.name">{{item.name}}</a-menu-item>
      </a-menu>
      <a-button class="selection-btn">
        <div class="selection-btn-pattern">
          <span>{{selectName}}</span>
          <img :src="require('@/assets/image/arrowBottom.png')" alt="" style="width: 17px; height: 8px;">
        </div>
      </a-button>
    </a-dropdown>
  </div>
</template>
<script>
export default {
  name: 'customSelect',
  data () {
    return {
      selectName: this.tabName
    }
  },
  methods: {
    handleMenuClick (e) {
      this.selectName = e.key
      this.$emit('handleSelect', e)
    }
  },
  props: {
    selection: {
      type: Array,
      default: () => []
    },
    tabName: {
      type: String,
      default: '全部'
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
.custom-select-container {
  width: 100%;
  height: 100%;
  .selection-btn {
    border: none;
    background-image: linear-gradient(to right, #fff, #ccc);
    background-image: -webkit-linear-gradient(to right, #fff, #ccc);
    background-image: -moz-linear-gradient(to right, #fff, #ccc);
    background-image: -o-linear-gradient(to right, #fff, #ccc);
    background-image: -ms-linear-gradient(to right, #fff, #ccc);
    border-radius: 0px;
    .selection-btn-pattern {
      @include flex-def;
      @include flex-cCenter;
      @include flex-zBetween;
      span {
        font-size: 20px;
        color: #555;
        font-weight: 500;
      }
    }
  }
}
</style>